<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <div class="flexs">
          <div>
            <el-form-item label="公告名称">
              <el-input v-model="name" placeholder="请输入公告名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="公告类型">
               <el-select v-model="type" placeholder="请选选择类型">
            <el-option
              v-for="(item, index) in typelist"
              :key="index"
              :label="item.typeName"
              :value="item.typeName"
            >
            </el-option>
          </el-select>
            </el-form-item>
          </div>&nbsp;&nbsp;
          <div>
            <el-form-item label="发布状态">
              <el-select v-model="status" placeholder="请选择发布状态">
                <el-option label="未发布" value=0></el-option>
                <el-option label="已发布" value=1></el-option>
              </el-select>
            </el-form-item>
          </div> &nbsp;&nbsp;
          <div>
           <el-button type="primary" @click="search">搜索</el-button>
           <el-button type="primary" @click="refreshInput">重置</el-button>
         </div> 
        </div>           
                     
      </el-form>         
    </el-card>
    <el-card style="margin-top: 10px">
      <div>
        <el-button size="small" type="primary" @click="add">新建</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; min-height: 440px; margin-top: 10px"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="bulletinBoardName" label="公告名称"> </el-table-column>
        <el-table-column prop="bulletinBoardType" label="公告类型"> </el-table-column>
        <el-table-column prop="bulletinBoardContent" label="公告内容">
        </el-table-column>
        <el-table-column prop="createBy" label="发布人">
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间"> </el-table-column>
        <el-table-column prop="status" label="发布状态"> 
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#C2C2C2"
              :active-value='1'
              :inactive-value="0"
              @change="updateIsUsing(scope.row)"
            >
            </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="del(scope.row)" size="small">删除</el-button>
            <!-- <el-button type="text" size="small"  @click="release(scope.$index, scope.row)">发布</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  <!-- //添加 -->
    <el-dialog title="添加公告" :visible.sync="dialogFormVisible">
      <el-form label-position="right" :model="form">
        <div class="flexs">
          <div>
            <el-form-item label="公告名称" label-width="80px">
              <el-input v-model="form.bulletinBoardName" placeholder="请输入公告名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="公告类型" label-width="80px">
             <el-select v-model="form.bulletinBoardType" placeholder="请选选择类型">
            <el-option
              v-for="(item, index) in typelist"
              :key="index"
              :label="item.typeName"
              :value="item.typeName"
            >
            </el-option>
          </el-select>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="公告内容" label-width="80px">
          <el-input type="textarea" v-model="form.bulletinBoardContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addout"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改公告" :visible.sync="editFlag">
      <el-form label-position="right" :model="form">
        <div class="flexs">
          <div>
            <el-form-item label="公告名称" label-width="80px">
              <el-input v-model="editform.bulletinBoardName" placeholder="请输入公告名称"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="公告类型" label-width="80px">
             <el-select v-model="editform.bulletinBoardType" placeholder="请选选择类型">
            <el-option
              v-for="(item, index) in typelist"
              :key="index"
              :label="item.typeName"
              :value="item.typeName"
            >
            </el-option>
          </el-select>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="公告内容" label-width="80px">
          <el-input type="textarea" v-model="editform.bulletinBoardContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="editout"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout=" prev, pager, next"
        :total="query.total"
      ></el-pagination>

      <div class="jumper">
        跳到第
        <input type="text" ref="pageNum" :value="query.pageNum" />
        页
      </div>
      <button @click="goPage">确定</button>
    </div>
  </div>
</template>
<script>
// bulletinrelease
import {
  getNationApi
} from "@/api/basics/classroom";
import { bulletinList ,bulletinAdd,bulletinEdit,bulletinDel} from "@/api/announcementManagement/announcement";
export default {
  data() {
    return {
      name:'',
      type:'',
      status:'',
      form: {
        bulletinBoardName:'',
        bulletinBoardType:'',
        bulletinBoardContent:'',
        createBy:'',
        createTime:''
      },
      editform:{
        bulletinBoardName:'',
        bulletinBoardType:'',
        bulletinBoardContent:'',
        id:''
      },
      query: {
        pageNum: 1,
        pageSize: 6,
        total: 0
      },
      dialogFormVisible: false,
      editFlag:false,
      typelist:'',
      tableData: [],
    };  
  },
  mounted(){
    this.getList()
    this.gettreeList()
  },
  methods: {
    // 类型
    async gettreeList(){
     let res=await getNationApi({parentId:203}) 
     console.log('233',res)
     this.typelist=res.rows
     console.log('23',this.typelist)
   },
    async getList(){
       let res=await bulletinList(this.query)
       console.log(res)
       this.tableData=res.rows
       this.query.total = res.total;
    },
    //搜索
    search(){
      let obj={
         bulletinBoardName:this.name,
         bulletinBoardType:this.type,
         status:this.status
      }
       bulletinList(obj).then(res => {
        console.log("222", res);
        this.tableData = res.rows;
        this.query.total = res.total;
      });
    },
      //重置 
    refreshInput() {
      this.name = "";
      this.type = "";
      this.status= "";
      this.getList();
    }, 
    // 分页 
    // 改变每页条数  
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getList()
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getList()
    },
    goPage() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
     this.getList()
    },
    //添加 
    add() {
      this.dialogFormVisible = true;
    }, 
    async addout(){
      let res=await bulletinAdd(this.form)
      console.log(res)
      this.$message.success("添加成功");
      this.dialogFormVisible = false;
      this.form={}
      this.getList()
    }, 
    //删除
    del(row) {
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          bulletinDel({ id: JSON.stringify(row.id) }).then(
            res => {
              console.log(res);
              this.$message.success("删除成功");
              this.getList();
            }
          );
        })
        .catch(() => {});
    },
    //编辑
    //修改数据回调
    handleEdit(index, row) {
      this.editFlag = true;
      console.log(row)
      this.editform.bulletinBoardName = row.bulletinBoardName;
      this.editform.bulletinBoardType = row.bulletinBoardType;
      this.editform.bulletinBoardContent = row.bulletinBoardContent;
      this.editform.id=row.id
    },
   async editout(){
      let res=await bulletinEdit(this.editform)
      console.log(res)
      this.$message.success("修改成功");
      this.editFlag = false;
      this.getList()
    },
    //修改状态
    updateIsUsing(row) {
      console.log(row)
      bulletinEdit({ status: row.status, id: row.id });
      this.$message.success("修改状态成功");
    },
    // //发布
    // async release(index,row){
    //     console.log(row)
    //     let obj={
    //       id:row.id,
    //       status:row.status,
    //       issueTime:row.issueTime
    //     }
    //     let res=await bulletinrelease(obj)
    //     console.log(res)
    //     this.$message.success("发布成功");
    // }
  },
};
</script>
<style lang="scss" scoped>
.flexs {
  display: flex;
  justify-content: center;
}
::v-deep .el-card {
  width: 95%;
  margin-left: 2.5%;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 150px;
  .jumper {
    font-size: 14px;
    margin-left: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    input {
      width: 40px;
      height: 26px;
      margin: 0 5px;
      text-align: center;
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #666;
      outline-style: none;
    }
  }
  button {
    height: 28px;
    line-height: 28px;
    border-radius: 5px;
    background-color: #4895db;
    border: solid 1px #4895db;
    color: #fff;
    font-size: 14px;
    padding: 0 8px;
  }
}
</style>
